<template>
  <div id="detail-params" v-if="Object.keys(detail_params).length !== 0">
    <div class="info">
      <div class="title">
        {{ detail_params.info.key }}
      </div>
      <div
        class="info-item"
        v-for="(item, key, index) in detail_params.info.set"
        :key="index"
      >
        <span class="name">{{ key }}</span>
        <span class="value">{{ item }}</span>
      </div>
    </div>
    <div class="rule">
      <div class="title">{{ detail_params.rule.key }}</div>
      <div
        class="rule-item"
        v-for="(item, index) in detail_params.rule.tables[0]"
        :key="index"
        :class="{ theader: index === 0 }"
      >
        <span v-for="(item_2, index_2) in item" :key="index_2">{{
          item_2
        }}</span>
      </div>
      <div class="disclaimer">{{ detail_params.rule.disclaimer }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detail_params: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  created() {},
  methods: {
    // imgLoad() {
    //   if (!this.lockEmit) {
    //     this.$emit('img-load-finished')
    //     this.lockEmit = true
    //   }
    // },
  },
}
</script>

<style lang="less" scoped>
#detail-params {
  padding: 10px 15px;
  border-bottom: 5px solid #eeeeee;
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .disclaimer {
    text-align: center;
    padding-top: 10px;
  }
  .info {
    .info-item {
      height: 40px;
      line-height: 40px;
      display: flex;
      border-bottom: 1px solid #eeeeee;
      font-size: 12px;
      .name {
        flex: 1;
      }
      .value {
        color: @base-color;
        flex: 4;
        font-weight: bold;
      }
    }
  }
  .rule {
    .rule-item {
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: flex;
      &.theader {
        border-bottom: 1px solid @base-color;
        color: @base-color;
        font-weight: bold;
      }
      span {
        flex: 1;
      }
    }
  }
}
</style>
